<template>
	<div class="container-login">
		<div class="wrapper-login-form">
			<div class="login-logo">{{ logo }}</div>
			<el-form ref="form" label-width="80px">
				<el-form-item label="账号" prop="username">
					<el-input v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input
						type="password"
						v-model="form.password"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button style="width: 60%" type="primary" @click="login"
						>登录
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { apiLogin } from '../apis/index';

export default {
	name: 'Login',
	data() {
		return {
			isAdmin: false,
			logo: '企业项目管理系统',
			form: {
				username: 'koa',
				password: '12345',
			},
		};
	},
	created() {
		if (this.$route.name === 'adminlogin') {
			this.isAdmin = true;
			this.logo = '企业项目后台管理系统';
		}
	},
    beforeRouteLeave(to, from, next) {
        console.log(to.name)
        console.log(from.name)
        if (to.name === 'login' || to.name === 'adminlogin') {
            setTimeout(() => {
                this.$router.go()
            }, 0)
        }
        next()
    },
	methods: {
		async login() {
			let res = await apiLogin(this.form);
			if (!res) return;
			if (res.code === 0) {
				this.$message.success(res.msg);

				if (this.isAdmin) {
					this.$router.push('/adminindex');
				} else {
					this.$router.push('/index');
				}
			} else {
				this.$message.warning(res.msg);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.container-login {
	.wrapper-login-form {
		margin: 20px auto;
		padding: 16px;
		border: 2px solid #42b983;
		border-radius: 10px;
		width: 400px;

		.login-logo {
			font-size: 18px;
			margin: 16px 0;
		}
	}
}
</style>
